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ABSTRACT 

Many online systems lack the ability of understanding and responding to users’ emotions. Commercial website 
appearance which is suitable to users’ emotion could attract and motivate users to purchase. In order to measure peoples’ 
emotion responses, physical and psychological methods are often used in Kansei studies. Facial expression, one of 
essential physical emotion response, directly reveals people’s perceptive feel. The aim of the study is mainly to explore the 
relationship between users’ facial emotion and commercial websites. In addition, the correlation between physical 
perception and cognitional respond is analyzed and discussed. The research method firstly is to explore website design 
factors by group discussion and investigation. Second, the experiment was executed to collect the participants’ emotion 
data including facial expression and psychological self-report emotion responds to commercial websites. ANOVA and 
Quantification Theory Type I were applied to statistically analyze the data. The results yield that some website design 
factors - situated color and graphic banner size- have significant effects on users’ psychological emotion and facial 
expression. The developed computing model provides an approach to predict the adapted design to users’ emotion. 
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INTRODUCTION 

Background 

The prevalence rate of net-surfing has reached as high as 48% in view of the network utilization status for the last 
decade in Taiwan. Network technology has become the mainstream of information transmission. Website has been used as 
one of tools to communicate information to audiences (Kent & Taylor, 1998). Scholar Powell (2002) states website 
appearance initially impress visitors before they begin to understand website content. Therefore, it is essential to realize 
how website design appeal and affect users. However, the past studies about website design mostly focus on usability and 
functionality. Norman (2003) proposed emotional design theory which claims it is crucial that users’ emotion responses to 
artifacts. In recent years, users’ emotion has been deemed as one of important design issues. For example, since on-line 
purchase is getting popular, people’s emotion respond is usually to affect their purchase decision. Thus, to measure 
customers’ emotion responds to on-line store appearance will be profitable to websites design. 

Emotion can be conducted one expressed in various ways, including subjective feelings, physiological activity, 
drive performance, cognitive evaluation, and behavioral tendency (Scherer, 1984). There are various measurement tools 
developed to measure emotional responses, including physiological, physical and psychological approach. Physiological 
measures are like s brain wave, heart rate, skin conductance activity, EMG. Physical measures comprise pupillary response, 
facial expressions, and etc. Psychological measures usually adopt self-report questionnaire or interview methods to learn 
users’ emotion perception (Mahlke & Minge, 2006). 
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Facial expressions which reveal ones’ emotion responds toward stimuli, directly and initially. Facial expressions 
also present kind ofones’ psychological appraisal in some way. Theaim of the study is to explore ones’ facial emotion 
respond and self-report appraisaltoward commercial website design.Figure 1 shows the research framework and the 
research purposes are stated as folows: 

• To explore the correlation betweenpsychological and facial emotion responses. 

• To explore the effect of commericial website design factors to one’s facial emotion. 

• To explore the effect of commericial website design factors to psychological appraisal. 

• The relationship between commericial website design factors and emotion. 




Figure 1: Research Framework Literature Review 



Commercial Websites Design 

Appearance design affect its affective usability when one browser website. It will usually affect users’ purchase 
decision and brand identification that people’s initial impression and emotional responds toward online website visual 
interfaces. Commercial websites design factors usually comprises brand logo, standard color, text, image, mascot graphic 
or some multimedia to represent brands identity. These visual elements all communicatebr and spirit to online audience 
The essential website design factors are described as following: 

Picture: Website pictures are applied to strengthen the message broadcast. The main image size usually affects 
users’ attention, interest and preferences. Other images could also be used to direct users’ to read content. 

Color: Color could trigger psychological and physiological reaction. They also come up with various substantive 
association or abstract emotion to users. Website color could express commercial brand personality. The primary color on 
websites could strongly enhance identification and impression. 

Facial Expression and Emotion 

Emotion is one’s psychophysical responses to external stimuli. Individuals express their emotion experience to 
communication with others (Izard, 1997). However, 55 % of face-to-face human communication is relied on facial 
expressions, indicating that facial expressions play an important role to reveal ones’ affective cues (Mehrabian & James,, 
1974). Facial expressions are one of the most wildly acknowledged forms of sentic modulation. Darwin researched and 
stated creatures have the coherent facial expression to communicate six primary emotions: fear, anger, sadness, happiness, 
disgust, and surprise. Based on Darwin’s researches, Ekman (1994) developed a “Facial Action Coding System(FACS) to 
identify the six primary emotions. Furthermore, Ekman, Friesen, and Joseph C. Hager published a significant updated 
version to Facial Action Coding System (FACS) in 2002. According to FACS, one’s face are classified to several parts 
including upper face, lower face, eyes, eyebrows, nose , chess, etc. The action units (AUs) of one’s facial muscular 
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movement are defined and encoded from slight different instant changes in each part. There are totally 44 action units: 12 
AUs are on upper face, 18 AUs are on lower face, and others are some combined action unit sets of head or other parts. The 
corresponding sets of action units are defined and identified to six primary emotions. For example, Table 1 states happy is 
AU6+AU12. FACS has become a common standard to systematically categorize the physical expression. 



Tabl e 1: “Happy” Emotion Identification Based on FA CS 






Soleymani, Pantic, & Pun (2012) researched the relationship between primary emotion and dimensional emotion. 
They proposed the values of the basic emotions on valence and arousal dimension as Table2. Accordingly, one’s facial 
emotion recognized by FACS could be quantified to the values of two-dimensional emotion. 



Table 2: The Valence and Arousal Values of Primary Emotion (Shu, 2007) 



Emotion 


Surprise 


Sad 


Angry 


Fear 


Disgust 


Happy 


Neutral 


Valence 


3.88 


3.49 


3.1 


3.4 


2.82 


6.96 


5.11 


Arousal 


5.51 


5.29 


5.66 


5.29 


5.22 


5.79 


3.67 



Psycho-Emotion Appraisal 

Self-Assessment Manikin (SAM) is one of self-report psycho-emotion appraisal measurement. Lang (1980; 
Hodes, Cook, & Lang, 1985) devised a picture-oriented instrument called the Self-Assessment Manikin (SAM) to directly 
assess the pleasure, arousal, and dominance associated in response to an object or event. Figure 2 depicts the SAM 
measurement illustrating its nonverbal, graphic depiction of various points along each of the three major affective 
dimensions. SAM ranges from a smiling, happy figure to a frowning, unhappy figure when representing the pleasure 
dimension, and ranges from an excited, wide-eyed figure to a relaxed, sleepy figure for the arousal dimension. The 
dominance dimension represents changes in control with changes in the size of SAM: a largefigure indicates maximum 
control in the situation. 




O O O O O O O O O 




'ooobooooo 

s & £5 BS 

oooo oooo o 

Figure 2: Sam Measurement (Lang, 1980) 



METHODOLOGY 

The study aims to analyze the emotion of browsing website. It was divided into 3 phases (3 phases is as shown in 
Figure3). First of all, we analyzed the related reference of web design by Focus Group, and reduced the web design factors 
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to three main factors: color, title font size and banner size. After Focus Groups, we made the website samples as stimulus 
by coding the main factors. Secondly, we collected the data by measuring the physical signals, user observation and 
questionnaire. Finally, we analyzed the data by statistic software SPSS, and discussed the emotion of browsing the website 
by quantitative analysis. 

15 volunteer participants (12 males and 3 females) were recruited in the study. Their average age is 23 and all 
much experienced in browsing websites. All subjects volunteered for this study and understood the experimental 
procedures. 

The average time of experiment is about 5 minutes per one subject. First of all, explaining the procedures. 
Secondly, asking the subjects for gazing the screen, and presenting each website sample for 3 seconds. There were a white 
screen in three seconds after each website sample, and nine website designs transmitted in random and recorded the system 
time when the web appeared. 




Figure 3: The phases of Study 



Samples 

We made the samples design by Focus Group. The stimulus of experiment was taken the apparel commercial 
brand websites for example. After concluding the main design factors of commercial brand website, the main web design 
factors include: layout design, text, picture, color, and operationally. We coded the web design factors by Focus Group, and 
there were five web designers in group. We compared with 12 apparel commercial brand websites in Taiwan, and 
concluded three main web design factors related with emotion are color tone and banner size. In accordance qualitative 
coding results, we defined color tone as warm, neutral and cold. The height of banner graphic size is classified as large 
(600 pixels), medium (400 pixels) and small (200 pixels). 

The orthogonal experimental design is executed and got the nine sample combinations. Thefashion websites are 
taken as the samples because users easily have affective responses to commercial websites. The samplesas Table3 were 
shown in randomsequence to participants during the experimental procedure. 



Table 3: Website Samples 
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Data Collection and Analysis 

In this study, the psycho- emotion and facial emotion are measures. The facial and psycho- emotion could be 
measured in the dimension of arousal and valance (Shu, 2007; Lang, 1980). Participants’ facial image is recorded by HD 
webcam and captured by eMotion software. eMotion, a facial emotion recognition software, developed by the ISLA 
Laboratory at the Universiteit van Amsterdam is constructed by a face tracking algorithm. eMotion handles the following 
process: (1) Face tracking: one’s face captured by the webcam is tracked and detected; (2) Feature extraction: the moving 
vectors of motion units (MUs) on one’s face are extracted and computed; (3) Facial emotion assessment: the moving 
vectors were classified and assessed the possibility on seven primary emotions (neutral, happy, surprise, angry disgust, 
fear, sad), defined by FACS (Sebe et al., 2006).A screen shot of the face tracking and the emotion recognition by eMotion 
software is shown in Fig.4. Then, facial emotion is transferred to the values of valance and arousal according to Shu’s 
study result as Table 4. 

Therefore, psycho- emotion defined with users’ psychological responds is measured on the dimension of arousal 
and valance of SAM. The measurement is presented on Google on-line Docs. 



Table 4: The Definition of the Emotion Measurement 



Mode 


Dimension 


Measurement Tool 


Psycho- emotion 


Valance 


An emotion result from one’s self-report on Self- 
Assessment Manikin Questionnaire. 


Arousal 


Facial emotion 


Valance 


The values of valance and arousal correspond to the 
emotions identified by FACS. 


Arousal 



RESULTS 
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The Correlation between Facial Emotion and Psycho- Emotion 

The correlation analysis result between facial emotion and psycho- emotionis showed as Table 5. The correlation 
coefficient of .859 was founded to be statistically significant at .05 

Table 5: Th e Correlation between Facial Emotion and Psych o- Emotion 





Psycho- 

Emotion 


Facial 

Emotion 


psycho- emotion 


1 


.859** 


facial emotion 


.859** 


1 



The Commercial Website Interfaces Effects of Facial Emotion 

To compare the two emotional perceptions of nine webpages, the descriptive statistics and one-way ANOVA 
analysis shows that the website design factors significantly effect on both users’ psycho-(F=13.559,p<0.001) and facial 
emotion (F=7.014,p<0.001) responses. Table 6 LSD post-analysis indicates sample 3(warm, medium size image) induces 
users’ highest psycho-emotion; and sample 4 (neutral, medium size image induces users’ lowest psycho-emotion. In 
addition, sample l(warm, large size image) produce highest facial- emotion; and sample 9 (neutral, large size image 
induces users’ lowest facial-emotion. 



Table 6: ANOVA Analysis of Website Design Factores to Users 9 Emotion 





Psych- 

Arousal 


Psych- 

Valance 


Faial 

Valance 


Facial 

Arousal 


Psycho- 

Emotion 


Facial 

Emotion 


Sample 


Mean 


SD 


Mean 


SD 


Mean 


SD 


Mean 


SD 


Mean 


Mean 


1 


5.03 


1.91 


6.03 


1.77 


5.98 


1.15 


4.94 


1.07 


5.53 


5.45 


2 


4.13 


1.56 


4.66 


1.86 


5.02 


1.36 


4.89 


1.04 


4.39 


4.95 


3 


5.53 


1.78 


6.28 


1.85 


5.90 


1.17 


4.91 


1.04 


5.90 


5.40 


4 


2.91 


1.61 


3.16 


1.85 


4.62 


1.42 


4.85 


1.14 


3.03 


4.73 


5 


5.09 


1.82 


5.53 


1.70 


5.27 


1.07 


4.43 


1.00 


5.31 


4.85 


6 


4.69 


2.19 


5.00 


2.23 


5.50 


1.35 


4.81 


1.09 


4.84 


5.15 


7 


3.09 


1.87 


3.13 


1.68 


4.77 


0.94 


4.20 


1.02 


3.10 


4.48 


8 


4.47 


1.48 


5.56 


1.83 


5.81 


1.31 


4.97 


1.03 


5.01 


5.39 


9 


3.28 


1.92 


3.81 


2.09 


4.73 


0.95 


4.23 


0.99 


3.54 


4.47 


F 


8.95 


12.85 


6.26 


2.88 


13.559 


7.014 


P 


<.05 


<.05 


<.05 


<.05 


.000*** 


.000*** 



Quantification Theory Type I: The Relationship between Web Design Factors and Emotion 

Adopt Quantification Theory Type I to analyze the relationship between website design factors and facial 
emotion. The facial emotion is dependent variable, and website design factors are independent variable. Website design 
factors are items, and each levels are categories. According to principle of Quantification theory I, higher partial correlation 
coefficient, score and range of categoryyield more significant effects on facial emotion. The category score means the 
positive or negative regressive coefficient upon facial emotion. The regression model was verified the reliability with t test 
of multiple correlation coefficient and partial correlation coefficient (Multiple correlation =0.842 » R 2 = 0.710). 
The regression equation is shown as Table 7. 

The higher partial correlation coefficient of color( 0.80) and Image size(0.63) yield more significant effects on 
facial emotion. Neutural and small image size with negative score might induce less valence and arousal. Besides, color 
(range=0.98) might have more significant effects on facial emotion than than image size(0.57). 

Table 7: Quantified Score of Website Design Factors 
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Partial 




Score 




Items 


Correlation 

Coefficient 


Category 


Valence 


Arousal 


Facial 

Emotion(Y 2 ) 


Range 


Color 

(XI) 




warm(X n ) 


0.65 


0.25 


0.45 




0.80 


cold(X 12 ) 


0.05 


0.10 


0.07 


0.98 




neutral(X 13 ) 


-0.70 


-0.35 


-0.52 




Image 

Size(X2) 




large (X 2i ) 


0.33 


0.15 


0.24 




0.63 


medium (X 22 ) 


0.04 


0.13 


0.09 


0.57 




small (X 23 ) 


-0.38 


-0.28 


-0.33 








constant 


5.39 


4.79 


5.09 





Y f =5.09+0.45 X u +0.07 X 12 -0.52 X 13 +0.24 X 21 +0.09 X 22 -0.33 X 23 
Multiple correlation =0.842 » R 2 = 0.710 



CONCLUSIONS 

This study would mainly compare the effect of website design factors to psychological and facial emotion. Both 
valence and arousal are measured in psychological, facial emotion. Color and image size are the most essential design 
factors from the expert group discussion. 9 website samples are designed in accordance to the variables of the two design 
factors for the experiments. There high correlation might referred that users’ have similar psycho- and facial emotion 
responses to website appearance. Website design factors are significant effect on psycho- and facial emotion. Neutral color 
induces lower psycho- and facial emotion; and warm color attracts higher psycho- valance and arousal. Regression model 
results color has higher coefficient score than image size. Neutral color and small image size score have negative 
coefficient. It might inferred that commercial website with neutral color and small image size would lower users’ emotion. 
The regression model also might provide a computational model for develop an adapted emotional design for website. 
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